<template>
  <layout :appHeader="{title: '培訓詳情'}">
    <view class="home-container">
      <view class="course-box">
        <view class="course-top">
          <image class="course-img" mode="aspectFill" :src="trainDetail.coverImage" />
        </view>
        <view class="course-info">
          <view class="c-title">{{trainDetail.title}}</view>
        </view>
      </view>
      <view class="exam-info">
        <view class="exam-list">
          <view class="exam-item">
            <span class="e-label">上課時間:</span>
            <span class="e-content e-time">{{description.time[0]}} - {{description.time[1]}}</span>
          </view>
          <view class="exam-item">
            <span class="e-label">上課時長:</span>
            <span class="e-content">{{description.period||0}}</span>
          </view>
          <view class="exam-item">
            <span class="e-label">講師:</span>
            <span class="e-content">{{description.lecturer||''}}</span>
          </view>
          <view class="exam-item">
            <span class="e-label">地址:</span>
            <span class="e-content">{{description.address||'-'}}</span>
          </view>
          <view class="exam-item">
            <span class="e-label">可預約數:</span>
            <span class="e-content">{{trainDetail.quota||0}}人</span>
          </view>
          <view class="exam-item">
            <span class="e-label">培訓方式:</span>
            <span class="e-content">線下課程</span>
          </view>
          <!-- <view class="exam-item" style="height:300rpx;">
          <span class="e-sort">07</span>
          <span class="e-label">上傳憑證：</span>
          <u-upload :action="action" :file-list="fileList" ></u-upload>
        </view>                -->
        </view>
      </view>
      <!-- <view class="exam-btn exam-enable" catchtap="jumpTrainFn" @click="submit()">
        <span>報名參加</span>
      </view> -->
    </view>
    <tui-button :disabled="disableSubmit || trainDetail.hasAppointment" :loading="submitLoading" class="bottom-button" @click="submit()">{{trainDetail.hasAppointment ? '已報名' : '報名參加'}}</tui-button>
  </layout>
</template>
<script>
import tuiButton from '@/components/thorui/tui-button/tui-button';
export default {
  components: {
    tuiButton
  },
  data() {
    return {
      trainDetail: {},
      description: {},
      disableSubmit: false,
      submitLoading: false,
      buttonText: '報名參加'
    }
  },
  onLoad(options) {
    this.getCourseDetail(options.id);
  },
  methods: {
    formatterDate(value) {
      return uni.$co.Common.parseTime(value)
    },
    submit() {
      this.submitLoading = true;
      this.disableSubmit = true;
      uni.$API.WorkOrder.createAppointment(this.trainDetail.id).then(res => {
        this.submitLoading = false;
        this.disableSubmit = false;
        if (res.status === 200) {
          uni.navigateTo({
            url: 'pages/account/myAppointment/index',
          });
        }
      }).catch(error => {
        this.submitLoading = false;
        this.disableSubmit = false;
      })
    },
    getCourseDetail(id) {
      uni.showLoading({
        title: '加載中',
        mask: true
      })
      uni.$API.Training.getCourseById(id).then(res => {
        if (res.status === 0) {
          this.trainDetail = res.data
          this.description = JSON.parse(res.data.description)
          const now = new Date().getTime();
          if (now < this.trainDetail.start) {
            this.disableSubmit = true;
            this.buttonText = '未開始報名'
          } else if (now > this.trainDetail.end) {
            this.disableSubmit = true;
            this.buttonText = '已結束報名'
          }
        }
        uni.hideLoading();
      }).catch(_ => {
        uni.hideLoading();
      })
    },
    formatterDate(value) {
      return uni.$co.Common.parseTime(value)
    }

  },
}
</script>
<style lang="scss" scoped>
.home-container {
  position: relative;
  padding: 0;
  height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 50rpx;
}
.course-box {
  position: relative;
  background: #fff;
}
.course-top {
  position: relative;
  width: 100%;
  height: 422rpx;
}
.course-img {
  position: relative;
  width: 100%;
  height: 422rpx;
  background: #d8d8d8;
}
.course-info {
  position: relative;
  padding: 30rpx;
}
.c-title {
  position: relative;
  color: #222;
  font-size: 40rpx;
  text-align: justify;
  font-weight: bold;
}

.collect-arrow {
  display: inline-block;
  color: #de698b;
  font-size: 26rpx;
  font-weight: 500;
  vertical-align: middle;
}
.ml-24 {
  margin-left: 20rpx;
  vertical-align: inherit;
}
.c-opton {
  margin-top: 32rpx;
}
.tag {
  padding: 6rpx 14rpx;
  margin-right: 20rpx;
  position: relative;
  display: inline-block;
  font-size: 22rpx;
  color: #da95a9;
  font-weight: 500;
  background: linear-gradient(133deg, #fdf4f7 0%, #fff4f7 100%);
  border-radius: 0rpx 21rpx 21rpx 21rpx;
  text-align: center;
}
.exam-info {
  position: relative;
  margin: 24rpx;
  padding: 10rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}
.exam-list {
  position: relative;
}
.exam-item {
  position: relative;
  height: 88rpx;
  display: flex;
  align-items: center;
}
.e-sort {
  display: inline-block;
  font-size: 30rpx;
  font-weight: 800;
  color: #d0d0d0;
  width: 44rpx;
  text-align: center;
}
.e-label {
  display: inline-block;
  margin-left: 20rpx;
  margin-right: 20rpx;
  font-size: 26rpx;
  font-weight: bold;
  color: #222;
  width: 120rpx;
}
.e-content {
  display: inline-block;
  font-size: 26rpx;
  font-weight: 400;
  color: #222;
}
.exam-btn {
  position: fixed;
  margin: 0 auto;
  bottom: 20rpx;
  left: 50%;
  transform: translate(-50%, 0);
  width: 92%;
  height: 88rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  background: rgba(81, 92, 195, 1);
  color: #fff;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exam-disabled {
  background: #ccc;
}
.exam-enable {
  opacity: 1;
}
.edit-icon {
  display: inline-block;
  width: 48rpx;
  height: 48rpx;
  background: url("https://pub-img.perfectdiary.com/material/image/2020/11/4aa90764f2b74216956f313daedc62a9.png")
    no-repeat;
  background-size: 100% 100%;
  background-position: center;
  margin-right: 12rpx;
}
.e-time {
  color: rgba(81, 92, 195, 1);
}
.bottom-button {
  font-weight: 500;
  background: #515cc3;
  color: #fff;
  border-radius: 12rpx;
  width: calc(100vw - 40px) !important;
  margin: auto !important;
}
uni-button[disabled]:not([type]),
uni-button[disabled][type="default"] {
  background: #515cc3 !important;
}
</style>